import React from 'react';
import {View, Image, ScrollView, StyleSheet} from 'react-native';
import { Overlay } from "./_teaset"
import { Lt, Color, Label, Button, Images, ImagePt, Nav, NavTheme, Jpp, Touch, Dialog, Oview, Navigator, Fimage, Jx, Rlist, cSys } from "./_utils";
import { Net, NET_NR, NET_RI } from "./_net"
import { ViewScale, cTemp } from './_util'
import { eRole, cMe } from './me/_me';
import { ViewPreVip } from './ViewPreVip';

class LabelVip extends React.PureComponent{
    render(){
        const {title, children} = this.props;
        return <View style={{flex:1, justifyContent:"center", alignItems:"center"}}>
            <Label style={{alignSelf:"center", fontSize:Lt.c18, color:Color.c3}}>{children}</Label>
            <Label style={{marginTop:5, alignSelf:"center", fontSize:Lt.c16, color:Color.c9}}>{title}</Label>
        </View>
    }
}
const c_theme = "#584017";
const styles = StyleSheet.create({
    group:{
        flexDirection:"row",
        width:Jpp.width - Lt.margin * 2,
        height:100,
    }
})
class ViewVip extends React.PureComponent{
    constructor(props){
        super(props);
        this.onTeam = this.onTeam.bind(this);
    }
    onTeam(){
        const { data } = this.props;
        Navigator.push("Team", {data});
    }
    render(){
        const { data, dataVip, onFresh, onInvite } = this.props;
        const ipt = ImagePt.huangguan;
        const ipt2 = ImagePt.yaoqing;
        const w2 = Jpp.width-Lt.margin*2;
        return <Rlist onFresh={onFresh} style={{flex:1, alignItems:"center"}}>
            <View style={{marginTop:20}}/>
            <ViewScale ipt = {ipt}>
                <Image style={{position:"absolute"}} source={Images.huangguan}/>
                <View style={{position:"absolute", top:40, left:148}}>
                    <Fimage uri={data.image} style={{width:80, height:80, borderRadius:40, borderWidth:2,borderColor:c_theme}}/>
                </View>
            </ViewScale>
            <Label style={{fontSize:Lt.c20, color:"#EECF70"}}>{data.name}</Label>
            <Label style={{color:"#957515", marginVertical:Lt.margin}}>加入日期:{Jx.toDate(dataVip.joinTime, "", false)}</Label>
            <Touch onPress={this.onTeam}> 
                <View style={{margin:Lt.margin, borderRadius:Lt.radiu2, backgroundColor:"white"}}>
                    <View style={styles.group}>
                        <LabelVip title={"团队总人数"}>{data.myTeamCount}</LabelVip>
                        <LabelVip title={"代理人数"}>{data.myAgentCount}</LabelVip>
                        <LabelVip title={"团队贡献"}>{data.myTeamMoney}</LabelVip>
                    </View>
                    <View style={{height:1, marginHorizontal:Lt.margin, backgroundColor:Color.line}}/>
                    <View style={styles.group}>
                        <LabelVip title={"直推会员"}>{dataVip.under}</LabelVip>
                        <LabelVip title={"会员下级"}>{dataVip.sub}</LabelVip>
                        <LabelVip title={"团队新增人员"}>{dataVip.add}</LabelVip>
                    </View>
                </View>
            </Touch>
            <Touch onPress={onInvite}>
                <View style={{alignSelf:"center", width:w2, height:w2*ipt2.r, marginTop:Lt.margin, marginBottom:30, justifyContent:"flex-end", alignItems:"flex-end"}}>
                    <Image style={{position:"absolute", width:w2, height:w2*ipt2.r}} source={Images.yaoqing}/>
                    <Image style={{margin:20}} source={Images.quyaoqing}/>
                </View>
            </Touch>
        </Rlist>
    }
}

export class PageVip extends React.PureComponent{
    constructor(props){
        super(props);
        const data = {
            roleId: cTemp.getRoleId(),
            image:Jpp.imageTemp,
            name:Jpp.questionMark,
            myAgentCount:Jpp.questionMark,
            myTeamCount:Jpp.questionMark,
            myTeamMoney:Jpp.questionMark,
        }
        const dataVip = {
            add:Jpp.questionMark,
            sub:Jpp.questionMark,
            joinTime:Jpp.dateTemp,
            under:Jpp.questionMark,
        }
        this.state = {
            data,
            dataVip,
        }
        this.onClick = this.onClick.bind(this);
        this.onInvite = this.onInvite.bind(this);
        this.onFresh = this.onFresh.bind(this);
        this.onPop = this.onPop.bind(this);
    }
    static navigationOptions = {
        tabBarIcon : ({focused, tintColor})=><Image source={focused ? Images.huiyuan_2 : Images.huiyuan}/>
    }
    // 如果是运营商, 请求会员信息
    fetData(freshed){
        Net.request("member/me", null, freshed ? {freshed} : {NET_RI}).then(r=>{
            if(r.data){
                cTemp.setRoleId(r.data.roleId);
                this.setState({data:cMe.toMe(r.data)});
            }
        });
        Net.request("member/memberDetail", null, {NET_NR}).then(r=>{
            if(r.data){
                this.setState({dataVip:r.data});
            }
        })
    }

    onFresh(didMount, freshed){
        if(didMount){
            const roleId = cTemp.getRoleId();
            if(roleId == eRole.CARRIER){
                this.fetData(freshed);
            }else{
                freshed();
            }
            return;
        }
        const { data } = this.state;
        if(data.roleId == eRole.CARRIER){
            this.fetData(freshed);
        }
    }
    // 申请成为vip
    onClick(){
        Net.request("team/myRole", null, {NET_RI}).then(r=>{
            cTemp.setRoleId(r.data);
            if(r.data == eRole.CARRIER){
                this.fetData(null);
            }else{
                Net.request("team/isPay", null, {NET_RI}).then(r2=>{
                    if(r2.data == 0){
                        Navigator.push("PageVipPay", { onPop : this.onPop })
                    }else {
                        Dialog.toast("支付审核中");
                    }
                })
            }
        });
    }
    // 邀请好友
    onInvite(){
        const {data} = this.state;
        if(data.roleId != eRole.CARRIER){
            return;
        }
        Navigator.push("Spread");
    }
    // 支付完毕，返回当前界面
    onPop(){
        Net.request("team/myRole", null, {NET_RI}).then(r=>{
            cTemp.setRoleId(r.data);
            if(r.data == eRole.CARRIER){
                this.fetData(null);
            }
            console.warn("支付回弹: " + Jx.stringify(r))
        });
    }
    render(){
        const {data, dataVip} = this.state;
        const isC = (data.roleId == eRole.CARRIER);
        return <View style = {{flex:1, backgroundColor:c_theme}}>
        <NavTheme.StateBar backgroundColor={isC ? c_theme : "black"}/>
        {
            isC ? 
            <ViewVip data = {data} dataVip={dataVip} onFresh={this.onFresh} onInvite = {this.onInvite}/> : 
            <ViewPreVip onClick={this.onClick}/>
        }
        </View>;
    }
}
